<html xmlns:th="http://www.thymeleaf.org"><!-- Thymeleaf的命名空间，将静态页面转换为动态的视图 -->
<head>
    <meta content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>

    <style type="text/css">
        .middle {
            float: none;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div th:if="${param.error != null}" class="alert alert-danger" th:utext="${session[SPRING_SECURITY_LAST_EXCEPTION]}">error</div>
    <div class="container">
        <h2>登录</h2>
        <br/>
        <form name='loginForm' action="login" method="POST" onsubmit="return validate();">
            <div class="row">
                <div class="form-group col-md-6 vertical-middle-sm">
                    <label for="email">邮箱</label> 
                    <input type="email" class="form-control" name="username" aria-describedby="emailHelp">
                </div>
            </div>      
         
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="password">密码</label> 
                    <input type="password" class="form-control" id="password" name="password">  
                </div>
            </div>
            <button type="submit" class="btn btn-primary">登录</button>
             <a class="btn btn-default" th:href="@{/registration.html}" >没有账号？</a>
        </form>
    </div>

    <script th:src="@{/js/jquery-3.5.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
    <script th:inline="javascript">
	    function validate() {
		        if (document.loginForm.username.value == "" && document.loginForm.password.value == "") {
		            alert("账号密码不能为空！");
		            document.loginForm.username.focus();
		            return false;
		        }
		        if (document.loginForm.username.value == "") {
		            alert("账号不能为空！");
		            document.loginForm.username.focus();
		            return false;
		        }
		        if (document.loginForm.password.value == "") {
		            alert("密码不能为空！");
		            document.loginForm.password.focus();
		            return false;
		        }
		    }
    </script>

</body>
</html>